<!-- 
  store.commit() 语法

    1. 字符串语法
      store.commit(mutationType, payload)

    2. 对象语法
      store.commit({
        type: mutationType,
        ...payload
      })

 -->

<template>
  <div>
    <h2>World</h2>
    <p>Count: {{ $store.state.count }}</p>
    <!-- 直接修改，不推荐，但没有毛病 -->
    <button @click="$store.state.count = 20">直接修改 Count</button>

    <!-- 推荐方式，提交突变 - 字符串语法 -->
    <button @click="$store.commit('set_conut')">
      提交突变来修改 Count - 字符串语法
    </button>

    <button @click="$store.commit({ type: 'set_count', count: 100 })">
      提交突变来修改 Count - 对象语法
    </button>

    <!-- methods + mapMutations 辅助函数 -->
    <button @click="set_count(100)">set_count(100)</button>
    <button @click="set_count(200)">set_count(200)</button>

    <button @click="fn1">set_msg</button>
  </div>

  <!-- 
    mapMutations(["set_count", "set_msg"])  => 展开形式如下

    {
      set_count(payload) {
        this.$store.commit('set_count', payload)
      },

      set_msg(payload) {
        this.$store.commit('set_msg', payload)
      }
    }

   -->
</template>

<script>
import { mapMutations } from "vuex";
import { SET_MSG } from "../store/mutation-types";

export default {
  methods: {
    // this.set_count(payload)  => store.commit('set_count', payload)
    ...mapMutations(["set_count"]),

    fn1() {
      this.$store.commit(SET_MSG);
    },
  },
};
</script>
